<template>
  <div id="app">
    <h1 class="header">后台管理系统</h1>

    <el-row>
      <el-col :span="4">
        <el-menu default-active="/" class="el-menu-vertical-demo" router>
          <el-menu-item index="/">
            <i class="el-icon-menu"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="/order">
            <i class="el-icon-document"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          <el-menu-item index="/goods">
            <i class="el-icon-setting"></i>
            <span slot="title">商品管理</span>
          </el-menu-item>
          <el-menu-item index="/shopcar">
            <i class="el-icon-setting"></i>
            <span slot="title">购物车管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20"><router-view /></el-col>
    </el-row>
  </div>
</template>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.header {
  height: 80px;
  text-align: center;
  background: cornflowerblue;
}
</style>
